<template>
  <div>
    <span class="btn" @click="prev">上一页</span>
    <span class="btn" v-for="index in pageList" :key="index" :class="{'active': index===currtentPage}">
      {{index}}
    </span>
    <span class="btn" @click="next">下一页</span>
    <div>
      当前页：{{currtentPage}}
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        currtentPage: 1,
        pageSum: 0
      }
    },
    props: {
      total: {
        type: Number,
        default: 55
      },
      limit: {
        type: Number,
        default: 10
      }
    },
    computed: {
      pageList () {
        this.pageSum = this.total%this.limit + 1
        const list = []
        for (var i = 0;i< this.pageSum;i++) {
          const k = i + 1
          list.push(k)
        }
        return list
      }
    },
    methods: {
      prev () {
        this.currtentPage = this.currtentPage === 1 ? 1 : this.currtentPage-1
      },
      next () {
        this.currtentPage = this.currtentPage === this.pageSum ? this.pageSum : this.currtentPage+1
      }
    }
  }
</script>

<style>
  .btn{
    border: 1px solid gray;
    padding: 0px 10px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-right: 5px;
  }
  .active {
    background: lightgray;
  }
</style>
